<template>
    <div class="dates-box">
      <div class="dates" v-for="(v, i) in formData[field]" :key="i">
        <el-select
          style="height:40px"
          size="mini"
          v-model="v.days"
          v-if="v.type !== 'other'"
          :placeholder="placeholderSelect"
          filterable
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          @change="changeSelect(i, v.days)"
        >
          <el-checkbox v-if="i === 0" v-model="checked" @change="selectAll" class="all-check">全选</el-checkbox>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="!v.days.includes(item.value) && publicData.includes(item.value)"
          />
          <!-- disabled: 不是当前下拉选中的&&别的下拉选中过这个 -->
        </el-select>
        <el-date-picker
          v-else
          size="mini"
          style="margin-top:6px"
          v-model="v.days"
          placeholder="请选择日期"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <i
          v-if="(type === 'normal' && i !== 0) || ['special', 'holiday'].includes(type)"
          class="iconfont icon-shanchu2-xian"
          @click="delDate(i)"
        ></i>
        <div class="date-time">
          <div v-for="(item, index) in v.timePoint" :key="index" class="times">
            <el-time-picker
              size="mini"
              v-model="item.period"
              placeholder="请选择时间"
              is-range
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
            <el-tooltip :show-after="500" v-if="index === 0" effect="dark" :content="tip" placement="top-start">
              <i class="iconfont icon-tianjia-yuan-xian1" @click="addTime(i)"></i>
            </el-tooltip>
            <i v-else class="iconfont icon-shanchu2-xian" @click="delTime(i, index)"></i>
            <el-input
              v-if="['special', 'holiday'].includes(type)"
              v-model.trim="item.note"
              placeholder="请添加备注"
              clearable
              class="memo"
            ></el-input>
          </div>
        </div>
      </div>
      <span v-if="type === 'normal'" class="add-btn" @click="addDate('legal')"
        ><i class="iconfont icon-tianjia-yuan-xian1"></i>新建工作日</span
      >
      <template v-else>
        <span class="add-btn" @click="addDate('legal')"
          ><i class="iconfont icon-tianjia-yuan-xian1"></i
          >{{ type === 'special' ? '新建法定节假日调休' : '新建法定节假日' }}</span
        >
        <span class="add-btn" @click="addDate('other')"><i class="iconfont icon-tianjia-yuan-xian1"></i>其他日期</span>
      </template>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SetTime',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => ({})
      },
      field: {
        type: String,
        default: ''
      },
      placeholderSelect: {
        type: String,
        default: '请选择'
      },
      type: {
        type: String,
        default: ''
      },
      tip: {
        type: String,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        publicData: [],
        checked: false // 全选
      }
    },
    computed: {
      formData: {
        get(){
            return this.form
        },
        set(val){
        this.$emit('update:form', val)
        }
      }
    },
    methods: {
      addTime (i) {
        const data = {
          i,
          field: this.field
        }
        this.$emit('onAddTime', data)
      },
      // i--formData[field]   index--v.timePoint
      delTime (i, index){
        const data = {
          i,
          index,
          field: this.field
        }
        this.$emit('onDelTime', data)
      },
      addDate (type){
        this.$emit('onAddDate', { field: this.field, type })
      },
          
      // 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除）
      changeSelect (i, data) {
        if (i == 0) {
          if (data.length === this.options.length) {
            this.checked = true
          } else {
            this.checked = false
          }
        }
        this.setPublicData()
      },
      // 修改当前选中的所有数据
      setPublicData() {
        let publicArr = []
        this.form[this.field].forEach((item) => {
          publicArr = [...publicArr, ...item.days]
        })
        this.publicData = publicArr
      },
      // 全选
      selectAll () {
        if (this.checked) {
          // 选中
          this.form[this.field].forEach((val, idx) => {
            if (idx == 0) {
                this.form[this.field][idx].days = [] // 清空数据
              this.options.forEach((v) => {
                this.form[this.field][idx].days.push(v.value)
              })
            } else {
                this.form[this.field][idx].days = []
            }
          })
          this.publicData = this.form[this.field][0].days
        } else {
          this.form[this.field][0].days = []
          this.publicData = []
        }
      },
      delDate(i){
        const data = {
          i,
          field: this.field
        }
        this.$emit('onDelDate', data)
        this.setPublicData()
      }
    }
  }
  </script>
  
  <style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .el-checkbox {
    width 100%
    /deep/.el-checkbox__input {
      display: none
    }
    /deep/.el-checkbox__label {
      margin-left: 12px
    }
  }

  .iconfont {
   cursor: pointer;
  }
  .all-check {
    color: #606266
  }
  .icon-shanchu2-xian {
    color: rgba(0, 0, 0, 0.38);
  }
  .dates-box {
    width: 100%;
    margin-top:8px;
  
    .dates {
      width: 100%;
      box-sizing: border-box;
      background: $c-back;
      border-radius: 4px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
  
      .el-select {
        flex: 1;
        :deep(.el-select__tags) {
          max-width: 250px !important
        }
      }
  
      .date-time {
        margin-left: 16px;
      }
  
      .icon-shanchu2-xian {
        color: $cf-level2;
        margin-left: 8px;
      }
  
      .times {
        display: flex;
        margin-top: 8px;
  
        .iconfont {
          margin-left: 12px;
          margin-top: -6px;
        }
  
        .icon-tianjia-yuan-xian1 {
          color: $c-main;
        }

  
        .memo {
          margin: -6px 0 0 10px;
          width: 200px;
        }
  
        &:first-child {
          margin-top: 6px;
        }
      }
    }
  }
  
  .add-btn {
    color: $c-main;
    margin-top: 8px;
    cursor: pointer;
    margin-right: 30px;
  
    .icon-tianjia-yuan-xian1 {
      margin-right: 8px;
    }
  }
  </style>
  